<template>
	<view>
		<!-- 好友列表 -->
		<view class="user-box">
			<view class="list-box">
				<view class="user-item-box" v-for="(item,index) in friendList" :key="index" >
					<view class="user-img" v-if="item.img != 1">
						<image :src="item.img" alt=""></image>
					</view>
					<view class="user-img" v-else>
						<image src="https://jihe2.oss-cn-beijing.aliyuncs.com/xinli/login/logo.png" alt=""></image>
					</view>
					<view class="content" @click="checkUserToRoom(item)">
						{{item.user}}
					</view>
					<button class="tui-btn tui-btn-block tui-gray-outline tui-btn-mini" hover-class="tui-outline-hover" @tap="delFriends(index, item.userId)">删除好友</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		name: 'record',
		data() {
			return {
				conversationList: [],
				friendList: [],
				isActive: 1, //默认聊天记录
				userAddConversationList: []
			}
		},
		computed: {
			...mapState({
				isLogin: state => state.isLogin,
				isSDKReady: state => state.isSDKReady,
				// conversationList: state => state.conversationList,
			})
		},
		watch: {
			isSDKReady(val) {
				//isSDKReady == true 请求会话列表
				if (val) {
					this.getConversationList()
				}
			},
			conversationList(val) {
				console.log('conversationList', val);
				this.getUserInfo(val); 
			}

		},
		onNavigationBarButtonTap(e) {
			if (e.float == "right") {
				uni.navigateTo({
					url: 'contacts'
				})
			}
		},
		methods: {
			delHuiHua(index, toUserId){
				// 视图删除
				this.userAddConversationList.splice(index,1);
				console.log(toUserId);
				// tIM删除   
				let promise = this.tim.deleteConversation('C2C'+toUserId);
			},
			delFriends(index, toUserId){
				// 视图删除
				this.friendList.splice(index,1);
				// 数据库删除
				this.$apiW.delFriend({
					'userId'  : this.$xinli.user.getUserId() ,
					'toUserId' : toUserId
				});
			},
			//去好友列表
			toFriends() {
				// uni.showToast({
				// 	title: '详情功能尚未完善~',
				// 	icon: "none"
				// });
				uni.navigateTo({
					url: './friends'
				})
			},
			//聊天的节点加上外层的div
			nodesFliter(str) {
				let nodeStr = '<div style="align-items: center;word-wrap:break-word;">' + str + '</div>'
				return nodeStr
			},
			//切换tab
			changeTabBtn(_index) {
				this.isActive = _index
				if (this.isSDKReady) {
					this.getConversationList()
				}
			},
			//获取消息列表
			getConversationList() {
				// 拉取会话列表
				let promise = this.tim.getConversationList();
				promise.then((res) => {
					let conversationList = res.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
					if (conversationList.length) {
						//将返回的会话列表拼接上 用户的基本资料  
						//说明：如果已经将用户信息 提交到tim服务端了 就不需要再次拼接
						this.conversationList = conversationList;
						this.$store.commit("updateConversationList", conversationList);
					}
				}).catch((err) => {
					console.warn('getConversationList error:', err); // 获取会话列表失败的相关信息
				});
			},
			//根据消息列表请求聊天对象的用户信息 并完成数据拼接
			getUserInfo(conversationList) {
				
				let that = this;
				this.userAddConversationList = []
				conversationList.forEach(async item => {
					let obj = {}
					obj.conversation = item
					// 走后端,获取聊天对象的用户信息
					obj.user = await that.$api.userMessage({
						userId: item.toAccount
					});
					if (obj.user.userid) {
						that.userAddConversationList.push(obj);
					}
					console.log(that.userAddConversationList, 'item  ', item, obj.user);
				})
				
				// 按最后时间排序     
				console.log( this.userAddConversationList[0]    ); 
				this.userAddConversationList.sort((a, b)=> b.conversation.lastMessage.lastTime - a.conversation.lastMessage.lastTime);
				console.log('sort-conversationList', this.userAddConversationList );
			},
			toRoom(item) {
				this.$store.commit('updateConversationActive', item)
				uni.navigateTo({
					url: './room'
				})
			},
			//选择用户聊天
			checkUserToRoom(toUserInfo) {
				this.$store.commit('createConversationActive', toUserInfo.userId)
				uni.navigateTo({
					url: './room'
				})
			}

		},
		onShow() {
			//
				let userInfo = uni.getStorageSync('userInfo');
				this.type = userInfo.type;
				if( !userInfo || '' == JSON.stringify(userInfo) || '{}' == JSON.stringify(userInfo)){
					uni.reLaunch({
						url: '/pages/login/login'
					}) 
				}else{
					let promise = this.tim.login({
						userID: userInfo.userId,
						userSig: userInfo.userSig
					});
					promise.then((res) => {
						//登录成功后 更新登录状态
						this.$store.commit("toggleIsLogin", true);
						//自己平台的用户基础信息
						//tim 返回的用户信息
						uni.setStorageSync('userTIMInfo', res.data)
					}).catch((err) => {
						console.warn('login error:', err); // 登录失败的相关信息
					});
				}
			
			// 获得消息
			if (this.isSDKReady) {
				console.log('2222')
				this.getConversationList()
			} else {
				console.log('333333')
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo');
			this.friendList = userInfo.friendList;
			let page = this.$tools.commons.getPage();
			if( page ){
				this.isActive = page.isActive;
			}
			console.log('dsda',page,this.friendList);
			
			
			
			// #ifndef H5
			uni.showShareMenu({
				showShareItems : ['qq', 'qzone', 'wechatFriends', 'wechatMoment']	
			});
			// #endif
		}
	}
</script>

<style scoped lange="scss">
	.nav-tab{
		background: none !important;
	}
	.list-box {
		width: 94%;
		margin: 40rpx auto;
	}

	.item-box {
		width: auto;
		height: 130rpx;
		padding: 20rpx;
		overflow: hidden;
		border-bottom: 1px solid #eee;
		display: flex;
		align-items: center;
	}

	.item-img {
		width: 80rpx;
		height: 80rpx;
	}

	.item-img img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.item-text {
		flex: 1;
		padding-left: 30rpx;
		height: 100rpx;
		color: #666;
		font-size: 28rpx;
	}

	.item-user {
		width: auto;
		height: 60rpx;
		line-height: 60rpx;
		color: 333;
		font-size: 32rpx;

	}

	.item-text-info {
		width: auto;
		height: 60rpx;
		line-height: 60rpx;
		color: #666;
		font-szie: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.user-box {
		width: auto;
		height: 80rpx;
		padding: 0 20rpx;
	}

	.nav-tab {
		padding-top: 20rpx;
		background: #fff;
		height: 80rpx;

	}

	.tab-item {
		float: left;
		height: 70rpx;
		padding: 0 20rpx;
		line-height: 70rpx;
		color: #df5451;
		font-size: 28rpx;
		border: 1px solid #df5451;
		border-top-left-radius: 25rpx;
		border-bottom-left-radius: 25rpx;
	}

	.tab-item1 {
		float: left;
		height: 70rpx;
		padding: 0 20rpx;
		line-height: 70rpx;
		color: #df5451;
		font-size: 28rpx;
		border: 1px solid #df5451;
		border-top-right-radius: 25rpx;
		border-bottom-right-radius: 25rpx;
	}

	.tab-item-active {
		color: #ffff01;
		background: #df5451;
	}

	.msg-box {
		line-height: 30rpx;
		font-size: 28rpx;
		color: #666;
	}

	.user-item-box {
		padding: 20rpx 0;
		width: auto;
		height: 80rpx;
		line-height: 80rpx;
		cursor: pointer;
		border-bottom: 1px solid #eee;
		display: flex;
		align-items: center;
	}

	.user-img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.content{
		padding: 0 20upx;
		flex: 1;
	}
	.user-img image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.user-name {
		padding-left: 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #666;
		font-weight: 500;
	}

	.item-msg {
		float: left;
		width: 40rpx;
		height: 100rpx;
	}

	.item-msg-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: #f06c7a;
		color: #fff;
		line-height: 40rpx;
		margin-top: 30rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.clear-box {
		clear: both;
	}

	.out-login {
		float: right;
		margin-right: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 40rpx;
		border-radius: 25rpx;
		color: #ffff01;
		background: #df5451;
		font-size: 26rpx;
	}
</style>
